define([
        'jquery', 'lib/snap.svg'
], function($,Snap){
	
	function MenuView() {
		//this.that = this;
		this.svgURL = 'http://www.w3.org/2000/svg';
		this.mainController = null;
		this.slideList = null;
		//this.snap = null;
		this.pageNum = 0;
		this.eachThumbNailSpace_y = 0;
		this.eachThumNailSpace_y_span =90;
		this.currentSlide ;
		this.currentSlideNum = 1;
	};
	
	MenuView.prototype = {
			
			setController : function(controller) {
				this.mainController = controller;
			},
			
			setSlideList : function(slideList) {
				this.slideList = slideList;
			},
			
			doRender : function() {
				
				var width = $(document).width(); //수정 document->window
				console.log('window.width: ',width); //수정 log 찍어본 부분
				
				var height = $(document).height();
				console.log('window.height: ',height);
				
				$('body').css({width: width, height: height}); 
				
				var wrapperDiv = $('<div></div>').attr({id: 'wrapper'});
				var menuBarDiv = $('<div></div>').attr({id: 'menu_bar'});
				var titleLogoDiv = $('<div></div>').attr('id', 'title_logo_div');
				var titleLogoImg = $('<img/>').attr({
					'id' : 'title_logo',
					'src' : 'img/title_logo.jpg'
				});
				var titleDiv = $('<div></div>').attr('id', 'title_div');
				var titleImg = $('<img/>').attr({
					'id' : 'title',
					'src' : 'img/title.png'
				});
				
				var toolBarDiv = $('<div></div>').attr('id', 'tool_bar');
				var slideToolBarDiv = $('<div></div>').attr('id', 'slide_tool_bar');
				var contentToolBarDiv =  $('<div></div>').attr('id', 'content_tool_bar');
				
				var containerDiv = $('<div></div>').attr({id: 'container'}).css({height: height-(102)+'px'}); //수정
				
				var addSlideBtn = $('<img/>').attr({
					'id' : 'addSlide',
					'class' : 'icon',
					'src' : 'img/add_slide.png',
					'alt' : '새 슬라이드 추가'
				});
				
				var removeSlideBtn = $('<img/>').attr({
					'id' : 'removeSlide', 
					'class' : 'icon',
					'src' : 'img/remove_slide.png',
					'alt' : '슬라이드 삭제'
				});
				
				var drawShapeBtn = $('<img/>').attr({
					'id' : 'drawShapeBtn', 
					'class' : 'icon',
					'src' : 'img/shape.png',
					'alt' : '도형 추가'
				});
				
				var circleBtn = $('<input></input>').attr({id:'circle', type: 'button', value: 'C'});
				var rectBtn = $('<input></input>').attr({id:'rect', type: 'button', value: 'R'});	
				var triBtn = $('<input></input>').attr({id:'triangle', type: 'button', value: 'T'});
				var pentBtn = $('<input></input>').attr({id:'pentagon', type: 'button', value: 'P'});
				var hexBtn = $('<input></input>').attr({id:'hexagon', type: 'button', value: 'H'});
				
				var changeFillBtn = $('<img>&nbsp;색&nbsp;:&nbsp;</img>').attr({
					'id' : 'changeFillBtn', 
					'class' : 'icon',
					'src' : 'img/change_fill.png',
					'alt' : '채우기'
				});
				
				var fillColorBox = $('<input>&nbsp;투명도&nbsp;:&nbsp;</input>').attr({id:'fill', type: 'color'});
				var fillopRange = $('<input></input>').attr({
					'id' :'fill', 
					'type' : 'range', 
					'min' : '0',
					'max' : '100',
					'value': '100'
				});
				
				var changeStrokeBtn = $('<img>&nbsp;색&nbsp;:&nbsp;</img>').attr({
					'id' : 'changeStrokeBtn', 
					'class' : 'icon',
					'src' : 'img/change_stroke.png',
					'alt' : '테두리'
				});
				var strokeColorBox = $('<input></input>').attr({id:'stroke', type: 'color'});
				var strokeStyleSelect = $('<select></select>').attr('id', 'stroke_style');
				var sOption1 = $('<option>실선</option>').attr('value', 'line');
				var sOption2 = $('<option>점선1</option>').attr('value', '5, 5');
				var sOption3 = $('<option>점선2</option>').attr('value', '10, 10');
				var sOption4 = $('<option>점선3</option>').attr('value', '20, 10, 5, 5, 5, 10');
				
				strokeStyleSelect.append(sOption1);
				strokeStyleSelect.append(sOption2);
				strokeStyleSelect.append(sOption3);
				strokeStyleSelect.append(sOption4);
				
				var strokeWidthSelect = $('<select></select>').attr('id', 'stroke_width');
				var wOption1 = $('<option>1</option>').attr('value', '1');
				var wOption2 = $('<option>2</option>').attr('value', '2');
				var wOption3 = $('<option>3</option>').attr('value', '3');
				var wOption4 = $('<option>4</option>').attr('value', '4');
				var wOption5 = $('<option>5</option>').attr('value', '5');
				var wOption6 = $('<option>6</option>').attr('value', '6');
				var wOption7 = $('<option>7</option>').attr('value', '7');
				
				strokeWidthSelect.append(wOption1);
				strokeWidthSelect.append(wOption2);
				strokeWidthSelect.append(wOption3);
				strokeWidthSelect.append(wOption4);
				strokeWidthSelect.append(wOption5);
				strokeWidthSelect.append(wOption6);
				strokeWidthSelect.append(wOption7);
				
				var showModeBtn = $('<img></img>').attr({
					'id' : 'showModeBtn',
					'src' : 'img/slide_show.png',
					'alt' : '슬라이드 쇼'
				});
				
				var thumbnailController = this.mainController.getThumbnailController();
				var slideEditorController = this.mainController.getSlideEditorController();

				addSlideBtn.click(
						$.proxy(
								thumbnailController.addSlide, 
								thumbnailController
						)
				);
				removeSlideBtn.click(
						$.proxy(
								thumbnailController.removeSlide, 
								thumbnailController
						)
				);
				circleBtn.click(
						$.proxy(
								slideEditorController.setDrawType, 
								slideEditorController
						)
				);
				rectBtn.click(
						$.proxy(
								slideEditorController.setDrawType, 
								slideEditorController
						)
				);
				triBtn.click(
						$.proxy(
								slideEditorController.setDrawType, 
								slideEditorController
						)
				);
				pentBtn.click(
						$.proxy(
								slideEditorController.setDrawType, 
								slideEditorController
						)
				);
				hexBtn.click(
						$.proxy(
								slideEditorController.setDrawType, 
								slideEditorController
						)
				);
				
				fillColorBox.change($.proxy(
								slideEditorController.updateContentFill, 
								slideEditorController
				));
				
				fillopRange.change($.proxy(
						slideEditorController.updateContentOpacity, 
						slideEditorController
				));
				
				strokeColorBox.change($.proxy(
						slideEditorController.updateContentStroke, 
						slideEditorController
				));
				
				strokeStyleSelect.change($.proxy(
						slideEditorController.updateStrokeStyle, 
						slideEditorController
				));
				
				strokeWidthSelect.change($.proxy(
						slideEditorController.updateStrokeWidth, 
						slideEditorController
				));
				
				showModeBtn.click($.proxy(
								slideEditorController.showMode, 
								slideEditorController
				));
				
				slideToolBarDiv.append(addSlideBtn);
				slideToolBarDiv.append(removeSlideBtn);
				slideToolBarDiv.append(showModeBtn);
				contentToolBarDiv.append(drawShapeBtn);
				
				contentToolBarDiv.append(circleBtn);
				contentToolBarDiv.append(rectBtn);
				contentToolBarDiv.append(triBtn);
				contentToolBarDiv.append(pentBtn);
				contentToolBarDiv.append(hexBtn);
				contentToolBarDiv.append(changeFillBtn);
				
				contentToolBarDiv.append(fillColorBox);
				contentToolBarDiv.append(fillopRange);
				
				contentToolBarDiv.append(changeStrokeBtn);
				contentToolBarDiv.append(strokeColorBox);
				contentToolBarDiv.append(strokeStyleSelect);
				contentToolBarDiv.append(strokeWidthSelect);
					
				
				toolBarDiv.append(slideToolBarDiv);
				toolBarDiv.append(contentToolBarDiv);				
				
				
				titleLogoDiv.append(titleLogoImg);
				titleDiv.append(titleImg);
				
				
				menuBarDiv.append(titleLogoDiv);
				menuBarDiv.append(titleDiv);
				
				wrapperDiv.append(menuBarDiv);
				wrapperDiv.append(toolBarDiv);
				wrapperDiv.append(containerDiv);
				
				$('body').append(wrapperDiv);
			}
	};
	
	return MenuView;
	

});